<template>
	<view class="listright">
		<view class="author-img">
			<image @click="goToPage" class="img" src="http://localhost:8099/static/宇航员1.jpg" mode=""></image>
			<view class="iconfont icon-tuya_huabanfuben add" v-show="show" @click="hide">
				
			</view>
		</view>
		<view class="iconfont icon-xin right-box" :class="{heartName:(heart==true)?'true':''}" @click="changeColor">
			
		</view>
		<view class="number">
			{{item.loveNumber}}
		</view>
		<view class="iconfont icon-pinglun right-box" @click="openComment">
			
		</view>
		<view class="number">
			{{item.commentNumber}}
		</view>
		<view class="iconfont icon-fenxiang right-box">
			
		</view>
		<view class="number">
			{{item.shareNumber}}
		</view>
		<view class="arround author-img" >
			<image class="img" src="http://localhost:8099/static/宇航员1.jpg" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		props:['item'],
		name:"listRight",
		data() {
			return {
				show:true,
				heart:false
			};
		},
		methods:{
			openComment(){
				this.$emit('open');
			},
			hide(){
				// console.log('hide');
				this.show=!this.show;
			},
			changeColor(){
				this.heart=!this.heart;
			},
			goToPage(){
				uni.navigateTo({
					url:"/pages/user/user"
				})
			}
		}
	}
</script>

<style>
	.listright{
		width: 50px;
		margin: 0 auto;
	}
.img{
	width: 50px;
	height:50px;
	border-radius: 25px;
}
.author-img{
	width: 50px;
	height:50px;
	border-radius: 25px;
	border:1px solid #fff;
	position:relative;
}
.right-box{
	width:50px;
	height:40px;
	margin-top:13px;
	text-align: center;
	line-height:40px;
	color:#fff;
	font-size:30px;
}
.number{
	color: #fff;
	text-align: center;
	font-size: 10px;
}
.arround{
	margin-top:15px;
	width: 50px;
	height:50px;
	animation: rotate 1.5s linear 0.2s infinite;
}
.add{
	width: 18px;
	height:18px;
	border-radius: 50%;
	background-color: red;
	position: absolute;
	bottom:-9px;
	left:16px;
	text-align: center;
	line-height: 18px;
	color:#fff;
	font-size: 10px;
}
.heartName{
	color: red;
}
@keyframes rotate{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}
</style>
